<!DOCTYPE html>
<html><head>
<title>HTML KickStart Elements</title>
<meta charset="UTF-8">
<meta name="description" content="" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script type="text/javascript" src="js/prettify.js"></script>                                   <!-- PRETTIFY -->
<script type="text/javascript" src="js/kickstart.js"></script>                                  <!-- KICKSTART -->
<link rel="stylesheet" type="text/css" href="css/kickstart.css" media="all" />                  <!-- KICKSTART -->
<link rel="stylesheet" type="text/css" href="style.css" media="all" />                          <!-- CUSTOM STYLES -->
</head><body><a id="top-of-page"></a><div id="wrap" class="clearfix">
<!-- ===================================== END HEADER ===================================== -->



<!-- ===================================== 
	TYPOGRAPHY 
===================================== -->
<div class="col_12">
<h3 id="typography">Typography</h3>
<ul class="tabs">
<li><a href="#type-example">Example</a></li>
<li><a href="#type-headings">Headings</a></li>
<li><a href="#type-paragraphs">Paragraphs</a></li>
<li><a href="#type-blockquotes">Blockquote</a></li>
<li><a href="#type-blockquotes-small">Blockquote.small</a></li>
<li><a href="#type-inline-styles">Inline Styles</a></li>
<li><a href="#type-address">Address</a></li>
</ul>

	<div id="type-example" class="tab-content">
	<div class="col_8">
	<h4>Paragraphs</h4>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
	magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper 
	suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in 
	hendrerit in vulputate velit esse molestie consequat</p>
	<p>El illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
	qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam 
	liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim 
	placerat facer possim assum.</p>
	
	<!-- BLOCKQUOTES -->
	<h4>Blockquote</h4>
	<blockquote><p>lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit 
	in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan 
	et iusto odio
	<span>Someone Important</span></p></blockquote>
	
	<!-- BLOCKQUOTE SMALL -->
	<h4>Blockquote Small</h4>
	<blockquote class="small"><p>lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit 
	in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan 
	et iusto odio
	<span>Someone Important</span></p></blockquote>
	</div>
	
	<!-- TYPE STYLES -->
	<div class="col_4">
	<h4>Inline Styles</h4>
	<ul>
	<li><strong>Strong</strong></li>
	<li><em>Emphasis</em></li>
	<li><a href="">Inline Link</a></li>
	<li><strike>Strike</strike></li>
	<li>Inline <span class="icon" data-icon="2"></span> Icons</li>
	<li><code>&lt;h1&gt;Sample Code&lt;/h1&gt;</code></li>
	</ul>
	<hr />
	
	<h1>Heading 1</h1>
	<h2>Heading 2</h2>
	<h3>Heading 3</h3>
	<h4>Heading 4</h4>
	<h5>Heading 5</h5>
	<h6>Heading 6</h6>
	<hr />
	
	<h4>Address</h4>
	<address><p>
	1234 South Creek Lane<br />
	Calgary, Alberta, Canada<br />
	T4B–1S6
	</p>
	</address>
	</div>
	</div>
	
	<div id="type-headings" class="tab-content">
<pre>
&lt;!-- Headings 1–6 --&gt;
&lt;h1&gt;Heading 1&lt;/h1&gt;
&lt;h2&gt;Heading 2&lt;/h2&gt;
&lt;h3&gt;Heading 3&lt;/h3&gt;
&lt;h4&gt;Heading 4&lt;/h4&gt;
&lt;h5&gt;Heading 5&lt;/h5&gt;
&lt;h6&gt;Heading 6&lt;/h6&gt;</pre>
	</div>
	
	<div id="type-paragraphs" class="tab-content">
<pre>
&lt;!-- Paragraph --&gt;
&lt;p&gt;Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt...&lt;/p&gt;
&lt;p&gt;El illum dolore eu feugiat nulla facilisis at vero eros et accumsan...&lt;/p&gt;</pre>
	</div>
	
	<div id="type-blockquotes" class="tab-content">
<pre>
&lt;!-- Blockquote --&gt;
&lt;blockquote&gt;
&lt;p&gt;
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit 
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan 
et iusto odio
&lt;span&gt;Someone Important&lt;/span&gt;
&lt;/p&gt;
&lt;/blockquote&gt;</pre>
	</div>
	
	<div id="type-blockquotes-small" class="tab-content">
<pre>
&lt;!-- Blockquote Small --&gt;
&lt;blockquote class=&quot;small&quot;&gt;
&lt;p&gt;
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit 
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan 
et iusto odio
&lt;span&gt;Someone Important&lt;/span&gt;
&lt;/p&gt;
&lt;/blockquote&gt;</pre>
	</div>
	
	<div id="type-inline-styles" class="tab-content">
<pre>&lt;!-- Strong --&gt;
&lt;strong&gt;Strong&lt;/strong&gt;

&lt;!-- Emphasis --&gt;
&lt;em&gt;Emphasis&lt;/em&gt;

&lt;!-- Inline Link --&gt;
&lt;a href=&quot;&quot;&gt;Inline Link&lt;/a&gt;

&lt;!-- Strike --&gt;
&lt;strike&gt;Strike&lt;/strike&gt;

&lt;!--Inline Icons --&gt;
Inline &lt;span class=&quot;icon&quot; data-icon=&quot;2&quot;&gt;&lt;/span&gt; Icons

&lt;!--Sample Code (encoded entities) --&gt;
&lt;code&gt;&amp;lt;h1&amp;gt;Sample Code&amp;lt;/h1&amp;gt;&lt;/code&gt;</pre>
	</div>
	
	<div id="type-address" class="tab-content">
<pre>
&lt;!-- Address --&gt;
&lt;address&gt;&lt;p&gt;
1234 South Creek Lane&lt;br /&gt;
Calgary, Alberta, Canada&lt;br /&gt;
T4B&#8211;1S6
&lt;/p&gt;
&lt;/address&gt;</pre>
	</div>

<!-- ===================================== 
	LISTS 
===================================== -->
<h3 id="lists">Lists</h3>
<ul class="tabs">
<li><a href="#list-example">Example</a></li>
<li><a href="#list-ul">UL</a></li>
<li><a href="#list-ol">OL</a></li>
<li><a href="#list-checks">UL.checks</a></li>
<li><a href="#list-alt">UL.alt</a></li>
</ul>

	<div id="list-example" class="tab-content">
	<div class="col_3">
	<h4>Unordered List</h4>
	<ul>
	<li>tation ullamcorper suscipit lobortis</li>
	<li>Nam liber tempor cum soluta nobis</li>
	<li>imperdiet doming id quod mazim</li>
	<li>suscipit lobortis nisl ut aliquip ex</li>
	</ul>
	</div>
	
	<div class="col_3">
	<h4>Ordered List</h4>
	<ol>
	<li>tation ullamcorper suscipit lobortis</li>
	<li>Nam liber tempor cum soluta nobis</li>
	<li>imperdiet doming id quod mazim</li>
	<li>suscipit lobortis nisl ut aliquip ex</li>
	</ol>
	</div>
	
	<div class="col_3">
	<h4>UL.checks</h4>
	<ul class="checks">
	<li>tation ullamcorper suscipit lobortis</li>
	<li>Nam liber tempor cum soluta nobis</li>
	<li>imperdiet doming id quod mazim</li>
	<li>suscipit lobortis nisl ut aliquip ex</li>
	</ul>
	</div>
	
	<div class="col_3">
	<h4>UL.alt</h4>
	<ul class="alt">
	<li>tation ullamcorper suscipit lobortis</li>
	<li>Nam liber tempor cum soluta nobis</li>
	<li>imperdiet doming id quod mazim</li>
	<li>suscipit lobortis nisl ut aliquip ex</li>
	</ul>
	</div>
	</div>
	
	<div id="list-ul" class="tab-content">
<pre>
&lt;!-- Unordered List --&gt;
&lt;ul&gt;
&lt;li&gt;tation ullamcorper suscipit lobortis&lt;/li&gt;
&lt;li&gt;Nam liber tempor cum soluta nobis&lt;/li&gt;
&lt;li&gt;imperdiet doming id quod mazim&lt;/li&gt;
&lt;li&gt;suscipit lobortis nisl ut aliquip ex&lt;/li&gt;
&lt;/ul&gt;</pre>
	</div>
	
	<div id="list-ol" class="tab-content">
<pre>
&lt;!-- Ordered List --&gt;
&lt;ol&gt;
&lt;li&gt;tation ullamcorper suscipit lobortis&lt;/li&gt;
&lt;li&gt;Nam liber tempor cum soluta nobis&lt;/li&gt;
&lt;li&gt;imperdiet doming id quod mazim&lt;/li&gt;
&lt;li&gt;suscipit lobortis nisl ut aliquip ex&lt;/li&gt;
&lt;/ol&gt;</pre>
	</div>
	
	<div id="list-checks" class="tab-content">
<pre>
&lt;!-- List Checks --&gt;
&lt;ul class=&quot;checks&quot;&gt;
&lt;li&gt;tation ullamcorper suscipit lobortis&lt;/li&gt;
&lt;li&gt;Nam liber tempor cum soluta nobis&lt;/li&gt;
&lt;li&gt;imperdiet doming id quod mazim&lt;/li&gt;
&lt;li&gt;suscipit lobortis nisl ut aliquip ex&lt;/li&gt;
&lt;/ul&gt;</pre>
	</div>
	
	<div id="list-alt" class="tab-content">
<pre>
&lt;!-- List Alternative Style --&gt;
&lt;ul class=&quot;alt&quot;&gt;
&lt;li&gt;tation ullamcorper suscipit lobortis&lt;/li&gt;
&lt;li&gt;Nam liber tempor cum soluta nobis&lt;/li&gt;
&lt;li&gt;imperdiet doming id quod mazim&lt;/li&gt;
&lt;li&gt;suscipit lobortis nisl ut aliquip ex&lt;/li&gt;
&lt;/ul&gt;</pre>
	</div>

<!-- ===================================== 
	MENUS
===================================== -->
<h3 id="menus">Menus</h3>
<ul class="tabs">
<li><a href="#menu-example">Example</a></li>
<li><a href="#menu-horizontal">Horizontal</a></li>
<li><a href="#menu-vertical">Vertical</a></li>
<li><a href="#menu-vertical-right">Vertical.right</a></li>
</ul>

	<div id="menu-example" class="tab-content">
	<!-- MENU VERTICAL -->
	<div class="col_3">
	<h4>Vertical Left</h4>
	<ul class="menu vertical">
	<li class="current"><a href="">Item 1</a></li>
	<li><a href="">Item 2</a></li>
	<li><a href="">Item 3</a>
		<ul>
		<li><a href="">Sub Item that is super long and we don't want it to break the menu</a></li>
		<li><a href="">Sub Item</a>
			<ul>
			<li><a href="">Sub Item</a></li>
			<li><a href="">Sub Item</a></li>
			<li><a href="">Sub Item</a></li>
			<li><a href="">Sub Item</a></li>
			</ul>
		</li>
		<li><a href="">Sub Item</a></li>
		</ul>
	</li>
	<li><a href="">Item 4</a></li>
	</ul>
	</div>
	
	<!-- MENU HORIZONTAL -->
	<div class="col_6">
	<h4>Horizontal</h4>
	<ul class="menu">
	<li class="current"><a href="">Item 1</a></li>
	<li><a href="">Item 2</a></li>
	<li><a href=""><span class="icon" data-icon="R"></span>Item 3</a>
		<ul>
		<li><a href=""><span class="icon" data-icon="G"></span>Sub Item</a></li>
		<li><a href=""><span class="icon" data-icon="A"></span>Sub Item</a>
			<ul>
			<li><a href=""><span class="icon" data-icon="Z"></span>Sub Item</a></li>
			<li><a href=""><span class="icon" data-icon="k"></span>Sub Item</a></li>
			<li><a href=""><span class="icon" data-icon="J"></span>Sub Item</a></li>
			<li><a href=""><span class="icon" data-icon="="></span>Sub Item</a></li>
			</ul>
		</li>
		<li class="divider"><a href=""><span class="icon" data-icon="T"></span>li.divider</a></li>
		</ul>
	</li>
	<li><a href="">Item 4</a></li>
	</ul>
	</div>
	
	<!-- MENU VERTICAL RIGHT -->
	<div class="col_3">
	<h4>Vertical Right</h4>
	<ul class="menu vertical right">
	<li><a href="">Item 1</a></li>
	<li><a href="">Item 2</a></li>
	<li><a href="">Item 3</a>
		<ul>
		<li><a href="">Sub Item</a></li>
		<li class="current"><a href="">Sub Item</a>
			<ul>
			<li><a href="">Sub Item</a></li>
			<li><a href="">Sub Item</a></li>
			<li><a href="">Sub Item</a></li>
			<li><a href="">Sub Item</a></li>
			</ul>
		</li>
		<li><a href="">Sub Item</a></li>
		</ul>
	</li>
	<li><a href="">Item 4</a></li>
	</ul>
	</div>
	</div>
	
	<div id="menu-vertical" class="tab-content">
<pre>
&lt;!-- Menu Vertical Left --&gt;
&lt;ul class=&quot;menu vertical&quot;&gt;
&lt;li class=&quot;current&quot;&gt;&lt;a href=&quot;&quot;&gt;Item 1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;&quot;&gt;Item 2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;&quot;&gt;Item 3&lt;/a&gt;
	&lt;ul&gt;
	&lt;li&gt;&lt;a href=&quot;&quot;&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;&quot;&gt;Sub Item&lt;/a&gt;
		&lt;ul&gt;
		&lt;li&gt;&lt;a href=&quot;&quot;&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;&quot;&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;&quot;&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;&quot;&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;&quot;&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;&quot;&gt;Item 4&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>
	</div>
	
	<div id="menu-horizontal" class="tab-content">
<pre>
&lt;!-- Menu Horizontal --&gt;
&lt;ul class=&quot;menu&quot;&gt;
&lt;li class=&quot;current&quot;&gt;&lt;a href=&quot;&quot;&gt;Item 1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;&quot;&gt;Item 2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;&quot;&gt;&lt;span class=&quot;icon&quot; data-icon=&quot;R&quot;&gt;&lt;/span&gt;Item 3&lt;/a&gt;
	&lt;ul&gt;
	&lt;li&gt;&lt;a href=&quot;&quot;&gt;&lt;span class=&quot;icon&quot; data-icon=&quot;G&quot;&gt;&lt;/span&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;&quot;&gt;&lt;span class=&quot;icon&quot; data-icon=&quot;A&quot;&gt;&lt;/span&gt;Sub Item&lt;/a&gt;
		&lt;ul&gt;
		&lt;li&gt;&lt;a href=&quot;&quot;&gt;&lt;span class=&quot;icon&quot; data-icon=&quot;Z&quot;&gt;&lt;/span&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;&quot;&gt;&lt;span class=&quot;icon&quot; data-icon=&quot;k&quot;&gt;&lt;/span&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;&quot;&gt;&lt;span class=&quot;icon&quot; data-icon=&quot;J&quot;&gt;&lt;/span&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;&quot;&gt;&lt;span class=&quot;icon&quot; data-icon=&quot;=&quot;&gt;&lt;/span&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/li&gt;
	&lt;li class=&quot;divider&quot;&gt;&lt;a href=&quot;&quot;&gt;&lt;span class=&quot;icon&quot; data-icon=&quot;T&quot;&gt;&lt;/span&gt;li.divider&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;&quot;&gt;Item 4&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;/pre&gt;
	</div>
	
	<div id="menu-vertical-right" class="tab-content">
<pre>
&lt;!-- Menu Vertical Right --&gt;
&lt;ul class=&quot;menu vertical right&quot;&gt;
&lt;li&gt;&lt;a href=&quot;&quot;&gt;Item 1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;&quot;&gt;Item 2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;&quot;&gt;Item 3&lt;/a&gt;
	&lt;ul&gt;
	&lt;li&gt;&lt;a href=&quot;&quot;&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
	&lt;li class=&quot;current&quot;&gt;&lt;a href=&quot;&quot;&gt;Sub Item&lt;/a&gt;
		&lt;ul&gt;
		&lt;li&gt;&lt;a href=&quot;&quot;&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;&quot;&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;&quot;&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;&quot;&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;&quot;&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;&quot;&gt;Item 4&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>
	</div>

<!-- ===================================== 
	TABLES 
===================================== -->
<h3 id="tables">Tables</h3>
<ul class="tabs">
<li><a href="#table-example">Example</a></li>
<li><a href="#table">Table</a></li>
<li><a href="#table-wside">Table w/side TH</a></li>
<li><a href="#table-styles">Table Styles</a></li>
</ul>

	<div id="table-example" class="tab-content">
	<div class="col_6">
	<h4>Table (default)</h4>
	<table cellspacing="0" cellpadding="0">
	<thead><tr>
		<th>Item1</th>
		<th>Item2</th>
		<th>Item3</th>
	</tr></thead>
	<tbody><tr>
		<td>Item1</td>
		<td>Item2</td>
		<td>Item3</td>
	</tr><tr>
		<td>Item1</td>
		<td>Item2</td>
		<td>Item3</td>
	</tr><tr>
		<td>Item1</td>
		<td>Item2</td>
		<td>Item3</td>
	</tr><tr>
		<td>Item1</td>
		<td>Item2</td>
		<td>Item3</td>
	</tr></tbody>
	</table>
	</div>
	
	<div class="col_6">
	<h4>Table.striped</h4>
	<table class="striped" cellspacing="0" cellpadding="0">
	<thead><tr>
		<th>&nbsp;</th>
		<th>Item2</th>
		<th>Item3</th>
	</tr></thead>
	<tbody><tr>
		<th>Item1</th>
		<td>Item2</td>
		<td>Item3</td>
	</tr><tr>
		<th>Item1</th>
		<td>Item2</td>
		<td>Item3</td>
	</tr><tr>
		<th>Item1</th>
		<td>Item2</td>
		<td>Item3</td>
	</tr><tr>
		<th>Item1</th>
		<td>Item2</td>
		<td>Item3</td>
	</tr></tbody>
	</table>
	</div><div class="clear"></div>
	
	<div class="col_6">
	<h4>Table.tight</h4>
	<table class="tight" cellspacing="0" cellpadding="0">
	<thead><tr>
		<th>Item1</th>
		<th>Item2</th>
		<th>Item3</th>
	</tr></thead>
	<tbody><tr>
		<td>Item1</td>
		<td>Item2</td>
		<td>Item3</td>
	</tr><tr>
		<td>Item1</td>
		<td>Item2</td>
		<td>Item3</td>
	</tr><tr>
		<td>Item1</td>
		<td>Item2</td>
		<td>Item3</td>
	</tr><tr>
		<td>Item1</td>
		<td>Item2</td>
		<td>Item3</td>
	</tr></tbody>
	</table>
	</div>
	
	<div class="col_6">
	<h4>Table.sortable</h4>
	<table class="sortable" cellspacing="0" cellpadding="0">
	<thead><tr>
		<th>Name</th>
		<th>Number</th>
		<th>Color</th>
		<th>Actions</th>
	</tr></thead>
	<tbody><tr>
		<td>Joshua</td>
		<td>555-4325</td>
		<td>Blue</td>
		<td><a href=""><span class="icon gray" data-icon="7"></span></a> <a href=""><span class="icon gray" data-icon="m"></span></a></td>
	</tr><tr>
		<td>Peter</td>
		<td>555-5698</td>
		<td>Gold</td>
		<td><a href=""><span class="icon gray" data-icon="7"></span></a> <a href=""><span class="icon gray" data-icon="m"></span></a></td>
	</tr><tr>
		<td>Mary</td>
		<td>666-7654</td>
		<td>Red</td>
		<td><a href=""><span class="icon gray" data-icon="7"></span></a> <a href=""><span class="icon gray" data-icon="m"></span></a></td>
	</tr><tr>
		<td>Gretty</td>
		<td>555-6732</td>
		<td>Pink</td>
		<td><a href=""><span class="icon gray" data-icon="7"></span></a> <a href=""><span class="icon gray" data-icon="m"></span></a></td>
	</tr></tbody>
	</table>
	</div>
	</div>
	
	<div id="table" class="tab-content">
<pre>
&lt;!-- Table --&gt;
&lt;table cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt;
&lt;thead&gt;&lt;tr&gt;
	&lt;th&gt;Item1&lt;/th&gt;
	&lt;th&gt;Item2&lt;/th&gt;
	&lt;th&gt;Item3&lt;/th&gt;
&lt;/tr&gt;&lt;/thead&gt;
&lt;tbody&gt;&lt;tr&gt;
	&lt;td&gt;Item1&lt;/td&gt;
	&lt;td&gt;Item2&lt;/td&gt;
	&lt;td&gt;Item3&lt;/td&gt;
&lt;/tr&gt;&lt;tr&gt;
	&lt;td&gt;Item1&lt;/td&gt;
	&lt;td&gt;Item2&lt;/td&gt;
	&lt;td&gt;Item3&lt;/td&gt;
&lt;/tr&gt;&lt;tr&gt;
	&lt;td&gt;Item1&lt;/td&gt;
	&lt;td&gt;Item2&lt;/td&gt;
	&lt;td&gt;Item3&lt;/td&gt;
&lt;/tr&gt;&lt;tr&gt;
	&lt;td&gt;Item1&lt;/td&gt;
	&lt;td&gt;Item2&lt;/td&gt;
	&lt;td&gt;Item3&lt;/td&gt;
&lt;/tr&gt;&lt;/tbody&gt;
&lt;/table&gt;</pre>
	</div>
	
	<div id="table-wside" class="tab-content">
<pre>
&lt;!-- Table w/Side --&gt;
&lt;table cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt;
&lt;thead&gt;&lt;tr&gt;
	&lt;th&gt;&nbsp;&lt;/th&gt;
	&lt;th&gt;Item2&lt;/th&gt;
	&lt;th&gt;Item3&lt;/th&gt;
&lt;/tr&gt;&lt;/thead&gt;
&lt;tbody&gt;&lt;tr&gt;
	&lt;th&gt;Item1&lt;/th&gt;
	&lt;td&gt;Item2&lt;/td&gt;
	&lt;td&gt;Item3&lt;/td&gt;
&lt;/tr&gt;&lt;tr&gt;
	&lt;th&gt;Item1&lt;/th&gt;
	&lt;td&gt;Item2&lt;/td&gt;
	&lt;td&gt;Item3&lt;/td&gt;
&lt;/tr&gt;&lt;tr&gt;
	&lt;th&gt;Item1&lt;/th&gt;
	&lt;td&gt;Item2&lt;/td&gt;
	&lt;td&gt;Item3&lt;/td&gt;
&lt;/tr&gt;&lt;tr&gt;
	&lt;th&gt;Item1&lt;/th&gt;
	&lt;td&gt;Item2&lt;/td&gt;
	&lt;td&gt;Item3&lt;/td&gt;
&lt;/tr&gt;&lt;/tbody&gt;
&lt;/table&gt;</pre>
	</div>
	
	<div id="table-styles" class="tab-content">
<pre>
&lt;!-- Table striped --&gt;
&lt;table class=&quot;striped&quot;&gt;
...
&lt;/table&gt;

&lt;!-- Table tight --&gt;
&lt;table class=&quot;tight&quot;&gt;
...
&lt;/table&gt;

&lt;!-- Table sortable --&gt;
&lt;table class=&quot;sortable&quot;&gt;
...
&lt;/table&gt;

&lt;!-- Table combined Styles --&gt;
&lt;table class=&quot;striped tight sortable&quot;&gt;
...
&lt;/table&gt;
</pre>
	</div>

<!-- ===================================== 
	TOOL TIPS 
===================================== -->
<h3 id="tooltips">ToolTips</h3>
<ul class="tabs">
<li><a href="#tooltip-example">Example</a></li>
<li><a href="#tooltip-positions">Positions</a></li>
<li><a href="#tooltip-html">w/ HTML Content</a></li>
</ul>

	<div id="tooltip-example" class="tab-content">
	<div class="col_4">
	<h4>Tooltips</h4>
	<p>Tooltips are awesome. These tooltips are designed to mimic the default browser tooltips - smart, aware of the edge of the browser window. Simple.</p>
	<p>Hover over the examples on the right to preview.</p>
	<p>Use:<br />
	<code>class="tooltip"</code> + <br />
	<code class="tooltip" title="my tooltip content">title="my tooltip content"</code></p>
	</div>
	
	<div class="col_4">
	<h4>Tooltip Positions</h4>
	<ul>
	<li><code class="tooltip" title="This is a default (top) tooltip">.tooltip</code> (default)</li>
	<li><code class="tooltip-top" title="This is a Top tooltip">.tooltip-top</code></li>
	<li><code class="tooltip-right" title="This is a Right tooltip">.tooltip-right</code></li>
	<li><code class="tooltip-left" title="This is a Left tooltip">.tooltip-left</code></li>
	<li><code class="tooltip-bottom" title="This is a Bottom tooltip">.tooltip-bottom</code></li>
	</ul>
	</div>
	
	<div class="col_4">
	<h4>Tooltips with HTML Content</h4>
	<code>.tooltip</code> + <code>data-content="#ID"</code>
	<hr />
	<button class="tooltip medium orange pill" data-content="#tooltipcontentID">Hover Over Me</button>&nbsp;
	<button class="tooltip medium blue pill" data-content="#tooltipcontentID" data-action="click">Click Me</button>
	<div class="tooltip-content" id="tooltipcontentID"><h5>HTML Content</h5>
	<img src="http://placehold.it/180x150/4D99E0/ffffff.png&text=180x150" width="180" height="150" />
	<p>This is more HTML content. You can place any HTML in this tooltip.</p></div>
	</div>
	</div>
	
	<div id="tooltip-positions" class="tab-content">
<pre>
&lt;!-- Tooltip Default (top) --&gt;
&lt;span class=&quot;tooltip&quot; title=&quot;This is a default (top) tooltip&quot;&gt;.tooltip&lt;/span&gt;

&lt;!-- Tooltip Top --&gt;
&lt;span class=&quot;tooltip-top&quot; title=&quot;This is a Top tooltip&quot;&gt;.tooltip-top&lt;/span&gt;

&lt;!-- Tooltip Right --&gt;
&lt;span class=&quot;tooltip-right&quot; title=&quot;This is a Right tooltip&quot;&gt;.tooltip-right&lt;/span&gt;

&lt;!-- Tooltip Left --&gt;
&lt;span class=&quot;tooltip-left&quot; title=&quot;This is a Left tooltip&quot;&gt;.tooltip-left&lt;/span&gt;

&lt;!-- Tooltip Bottom --&gt;
&lt;span class=&quot;tooltip-bottom&quot; title=&quot;This is a Bottom tooltip&quot;&gt;.tooltip-bottom&lt;/span&gt;
</pre>
	</div>
	
	<div id="tooltip-html" class="tab-content">
<pre>
&lt;!-- Hover Action --&gt;
&lt;button class=&quot;tooltip medium orange pill&quot; data-content=&quot;#tooltipcontentID&quot;&gt;Hover Over Me&lt;/button&gt;

&lt;!-- Click Action --&gt;
&lt;button class=&quot;tooltip medium blue pill&quot; data-content=&quot;#tooltipcontentID&quot; data-action=&quot;click&quot;&gt;Click Me&lt;/button&gt;

&lt;!-- Tooltip Content --&gt;
&lt;div class=&quot;tooltip-content&quot; id=&quot;tooltipcontentID&quot;&gt;&lt;h5&gt;HTML Content&lt;/h5&gt;
&lt;img src=&quot;http://placehold.it/180x150/4D99E0/ffffff.png&amp;text=180x150&quot; width=&quot;180&quot; height=&quot;150&quot; /&gt;
&lt;p&gt;This is more HTML content. You can place any HTML in this tooltip.&lt;/p&gt;&lt;/div&gt;
</pre>
	</div>
	
<!-- ===================================== 
	HORIZONTAL RULES 
===================================== -->
<h3 id="horizontal-rules">Horizontal Rules</h3>
<ul class="tabs">
<li><a href="#hr-example">Example</a></li>
<li><a href="#hr-html">HTML</a></li>
</ul>

	<div id="hr-example" class="tab-content">
	<div class="col_4">
	<h4>HR</h4>
	<hr />
	</div>
	
	<div class="col_4">
	<h4>HR.alt1</h4>
	<hr class="alt1" />
	</div>
	
	<div class="col_4">
	<h4>HR.alt2</h4>
	<hr class="alt2" />
	</div>
	</div>
	
	<div id="hr-html" class="tab-content">
<pre>
&lt;!-- HR --&gt;
&lt;hr /&gt;

&lt;!-- HR.alt1 --&gt;
&lt;hr class=&quot;alt1&quot; /&gt;

&lt;!-- HR.alt2 --&gt;
&lt;hr class=&quot;alt2&quot; /&gt;</pre>
	</div>

<!-- ===================================== 
	ICONS
===================================== -->
<script type="text/javascript">
$(document).ready(function(){
	var icons = $('#icons-base .icon, #icons-social .icon');
	var iconCode = $('#icons-instructions pre');
	
	icons.addClass('gray');
	
	$('#icon-size').change(function(){
		icons.removeClass('small medium large x-large').addClass($(this).attr('value'));
		var iconClass = $('.icon.selected').attr('class').replace(' selected', "");
		iconCode.html('&lt;span class=&quot;'+iconClass+'&quot; data-icon="'+$('.icon.selected').text()+'"&gt;&lt;/span&gt;');
	});
	
	$('#icon-color').change(function(){
		icons.removeClass('gray darkgray black white red blue green pink').addClass($(this).attr('value'));
		var iconClass = $('.icon.selected').attr('class').replace(' selected', "");
		iconCode.html('&lt;span class=&quot;'+iconClass+'&quot; data-icon="'+$('.icon.selected').text()+'"&gt;&lt;/span&gt;');
	});
	
	icons.click(function(){
		icons.removeClass('selected');
		$(this).addClass('selected');
		var iconClass = $('.icon.selected').attr('class').replace(' selected', "");
		iconCode.html('&lt;span class=&quot;'+iconClass+'&quot; data-icon=&quot;'+$('.icon.selected').text()+'&quot;&gt;&lt;/span&gt;');
	});
});
</script>
<style type="text/css">
#icons-instructions{border:1px solid lightblue;background:#f5f5f5;}
#icons-instructions .inner{padding:20px;}
#icons-instructions label,
#icons-instructions select{display:inline;}
#icons-instructions p{margin:0;}
#icons-instructions pre{margin:0;background:#fff;}
#icons-base .icon,
#icons-social .icon{border:1px solid #ddd;background:#f5f5f5;box-shadow:inset 0px 0px 5px rgba(0,0,0,0.2);
-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;padding:10px;margin:5px;cursor:pointer;}
#icons-base .icon span{*top:-36%;/*IE 7 ONLY*/}
#icons-base .icon.social span{*top:-16%;/*IE 7 ONLY*/}
#icons-base .icon.white,
#icons-social .icon.white{background:#999;}
#icons-base .icon.selected,
#icons-social .icon.selected{border:1px solid orange;background:gold;color:#fff;text-shadow:0px 2px 1px rgba(0,0,0,0.2);}
</style>

<h3 id="icons">Icons/Glyphs</h3>
<div id="icons-instructions" class="col_12 clearfix">
<label for="icon-size">Choose Size</label>
<select name="icon-size" id="icon-size">
<option value="x-large">X-Large</option>
<option value="large">Large</option>
<option value="medium">Medium</option>
<option value="small">Small</option>
<option value="">Default</option>
</select>
<label for="icon-color">Color</label>
<select name="icon-color" id="icon-color">
<option value="gray">Gray</option>
<option value="darkgray">Dark Gray</option>
<option value="black">Black</option>
<option value="white">White</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="pink">Pink</option>
<option value="">Default (text color)</option>
</select>
<p>Select an Icon below and copy the HTML to use:</p>
<pre>&lt;span class=&quot;icon x-large gray&quot; data-icon=&quot;!&quot;&gt;&lt;/span&gt;</pre>
</div>

<div class="notice" style="margin:10px 5px;">Create your own custom Icon Font with <a style="margin:0;" href="http://keyamoon.com/icomoon/">IcoMoon</a>. Best Icon Font on the planet! By <a href="https://twitter.com/#!/keyamoon"><span class="icon social medium" style="margin:0;" data-icon="e"></span>KeyaMoon</a></div>

<ul class="tabs">
<li><a href="#icons-base">Base Icons</a></li>
<li><a href="#icons-social">Social Icons</a></li>
</ul>

	<div id="icons-base" class="tab-content">
	<span class="icon x-large selected" data-icon="!" title="Warning"></span>
	<span class="icon x-large" data-icon="#" title="Color"></span>
	<span class="icon x-large" data-icon="$" title="Cart"></span>
	<span class="icon x-large" data-icon="%" title="Flag"></span>
	<span class="icon x-large" data-icon="&" title="Location"></span>
	<span class="icon x-large" data-icon="&#x22;" title="Comment"></span>
	<span class="icon x-large" data-icon="&#x27;" title="Comment_2"></span>
	<span class="icon x-large" data-icon="(" title="Download"></span>
	<span class="icon x-large" data-icon=")" title="Upload"></span>
	<span class="icon x-large" data-icon="*" title="Starburst"></span>
	<span class="icon x-large" data-icon="," title="Folder"></span>
	<span class="icon x-large" data-icon="." title="Paper"></span>
	<span class="icon x-large" data-icon="+" title="Plus"></span>
	<span class="icon x-large" data-icon="-" title="Minimize"></span>
	<span class="icon x-large" data-icon="/" title="Bag"></span>
	<span class="icon x-large" data-icon="0" title="Picture"></span>
	<span class="icon x-large" data-icon="1" title="Photo"></span>
	<span class="icon x-large" data-icon="2" title="Video"></span>
	<span class="icon x-large" data-icon="3" title="Music"></span>
	<span class="icon x-large" data-icon="4" title="Monitor"></span>
	<span class="icon x-large" data-icon="5" title="Camera"></span>
	<span class="icon x-large" data-icon="6" title="Calender"></span>
	<span class="icon x-large" data-icon="7" title="Pencil"></span>
	<span class="icon x-large" data-icon="8" title="Phone"></span>
	<span class="icon x-large" data-icon="9" title="Microphone"></span>
	<span class="icon x-large" data-icon=":" title="Undo"></span>
	<span class="icon x-large" data-icon=";" title="Redo"></span>
	<span class="icon x-large" data-icon="<" title="Zoom In"></span>
	<span class="icon x-large" data-icon="=" title="Equalizer"></span>
	<span class="icon x-large" data-icon=">" title="Zoom Out"></span>
	<span class="icon x-large" data-icon="?" title="Question"></span>
	<span class="icon x-large" data-icon="@" title="Mail"></span>
	<span class="icon x-large" data-icon="A" title="Paperplane"></span>
	<span class="icon x-large" data-icon="B" title="Tag"></span>
	<span class="icon x-large" data-icon="C" title="Checkmark"></span>
	<span class="icon x-large" data-icon="D" title="Database"></span>
	<span class="icon x-large" data-icon="E" title="Busy"></span>
	<span class="icon x-large" data-icon="F" title="Fire"></span>
	<span class="icon x-large" data-icon="G" title="Cog"></span>
	<span class="icon x-large" data-icon="H" title="Heart-empty"></span>
	<span class="icon x-large" data-icon="I" title="Home"></span>
	<span class="icon x-large" data-icon="J" title="Neutral"></span>
	<span class="icon x-large" data-icon="K" title="Happy"></span>
	<span class="icon x-large" data-icon="L" title="Sad"></span>
	<span class="icon x-large" data-icon="M" title="Cup"></span>
	<span class="icon x-large" data-icon="N" title="Meter"></span>
	<span class="icon x-large" data-icon="O" title="Key"></span>
	<span class="icon x-large" data-icon="P" title="Printer"></span>
	<span class="icon x-large" data-icon="Q" title="Switch"></span>
	<span class="icon x-large" data-icon="R" title="Cube"></span>
	<span class="icon x-large" data-icon="S" title="Product"></span>
	<span class="icon x-large" data-icon="T" title="Trash"></span>
	<span class="icon x-large" data-icon="U" title="Users"></span>
	<span class="icon x-large" data-icon="V" title="Power"></span>
	<span class="icon x-large" data-icon="W" title="Shield"></span>
	<span class="icon x-large" data-icon="X" title="Error"></span>
	<span class="icon x-large" data-icon="Y" title="Grid"></span>
	<span class="icon x-large" data-icon="Z" title="Wrench"></span>
	<span class="icon x-large" data-icon="[" title="Upload_2"></span>
	<span class="icon x-large" data-icon="\" title="Cloud"></span>
	<span class="icon x-large" data-icon="]" title="Download_2"></span>
	<span class="icon x-large" data-icon="^" title="Move"></span>
	<span class="icon x-large" data-icon="_" title="Link"></span>
	<span class="icon x-large" data-icon="`" title="Sunny"></span>
	<span class="icon x-large" data-icon="a" title="Eye"></span>
	<span class="icon x-large" data-icon="b" title="Bookmark"></span>
	<span class="icon x-large" data-icon="c" title="Checkmark_2"></span>
	<span class="icon x-large" data-icon="d" title="Star-empty"></span>
	<span class="icon x-large" data-icon="e" title="Star-half"></span>
	<span class="icon x-large" data-icon="f" title="Star"></span>
	<span class="icon x-large" data-icon="g" title="Cog_2"></span>
	<span class="icon x-large" data-icon="h" title="Heart"></span>
	<span class="icon x-large" data-icon="i" title="Info"></span>
	<span class="icon x-large" data-icon="j" title="Stats"></span>
	<span class="icon x-large" data-icon="k" title="Pie Chart"></span>
	<span class="icon x-large" data-icon="l" title="Lock"></span>
	<span class="icon x-large" data-icon="m" title="Remove"></span>
	<span class="icon x-large" data-icon="n" title="Support"></span>
	<span class="icon x-large" data-icon="o" title="Target"></span>
	<span class="icon x-large" data-icon="p" title="Add"></span>
	<span class="icon x-large" data-icon="q" title="Thumbs Up"></span>
	<span class="icon x-large" data-icon="r" title="Thumbs Down"></span>
	<span class="icon x-large" data-icon="s" title="Magnifier"></span>
	<span class="icon x-large" data-icon="t" title="Clock"></span>
	<span class="icon x-large" data-icon="u" title="User"></span>
	<span class="icon x-large" data-icon="v" title="Clipboard"></span>
	<span class="icon x-large" data-icon="w" title="Book"></span>
	<span class="icon x-large" data-icon="x" title="Close"></span>
	<span class="icon x-large" data-icon="y" title="Map"></span>
	<span class="icon x-large" data-icon="z" title="Tools"></span>
	<span class="icon x-large" data-icon="{" title="Tri-left"></span>
	<span class="icon x-large" data-icon="|" title="Tri-down"></span>
	<span class="icon x-large" data-icon="}" title="Tri-right"></span>
	<span class="icon x-large" data-icon="~" title="Tri-up"></span>
	<span class="icon x-large" data-icon="&nbsp;" title="Play"></span>
	</div>
	
	<div id="icons-social" class="tab-content">
	<span class="icon social x-large" data-icon="1" title="Apple"></span>
	<span class="icon social x-large" data-icon="2" title="Windows"></span>
	<span class="icon social x-large" data-icon="3" title="CSS3"></span>
	<span class="icon social x-large" data-icon="4" title="Bluetooth"></span>
	<span class="icon social x-large" data-icon="5" title="HTML5"></span>
	<span class="icon social x-large" data-icon="6" title="HTML5_2"></span>
	<span class="icon social x-large" data-icon="7" title="Share"></span>
	<span class="icon social x-large" data-icon="8" title="Delicious"></span>
	<span class="icon social x-large" data-icon="A" title="Amazon"></span>
	<span class="icon social x-large" data-icon="B" title="Blogger"></span>
	<span class="icon social x-large" data-icon="C" title="Forrst"></span>
	<span class="icon social x-large" data-icon="D" title="Dribble"></span>
	<span class="icon social x-large" data-icon="E" title="Twitter"></span>
	<span class="icon social x-large" data-icon="F" title="Facebook"></span>
	<span class="icon social x-large" data-icon="G" title="Gplus"></span>
	<span class="icon social x-large" data-icon="H" title="Github"></span>
	<span class="icon social x-large" data-icon="I" title="Linkedin"></span>
	<span class="icon social x-large" data-icon="J" title="Gplus_2"></span>
	<span class="icon social x-large" data-icon="K" title="Flickr"></span>
	<span class="icon social x-large" data-icon="L" title="Lastfm"></span>
	<span class="icon social x-large" data-icon="M" title="Soundcloud"></span>
	<span class="icon social x-large" data-icon="P" title="Picasa"></span>
	<span class="icon social x-large" data-icon="Q" title="Deviantart"></span>
	<span class="icon social x-large" data-icon="R" title="Feed"></span>
	<span class="icon social x-large" data-icon="S" title="Skype"></span>
	<span class="icon social x-large" data-icon="T" title="Twitter_2"></span>
	<span class="icon social x-large" data-icon="U" title="Youtube"></span>
	<span class="icon social x-large" data-icon="V" title="Vimeo"></span>
	<span class="icon social x-large" data-icon="W" title="Wordpress"></span>
	<span class="icon social x-large" data-icon="X" title="Tumblr"></span>
	<span class="icon social x-large" data-icon="Y" title="Yahoo"></span>
	<span class="icon social x-large" data-icon="a" title="Amazon_2"></span>
	<span class="icon social x-large" data-icon="b" title="Blogger_2"></span>
	<span class="icon social x-large" data-icon="c" title="Forrst_2"></span>
	<span class="icon social x-large" data-icon="d" title="Dribble_2"></span>
	<span class="icon social x-large" data-icon="e" title="Twitter_3"></span>
	<span class="icon social x-large" data-icon="f" title="Facebook_2"></span>
	<span class="icon social x-large" data-icon="g" title="Gplus_3"></span>
	<span class="icon social x-large" data-icon="h" title="Github_2"></span>
	<span class="icon social x-large" data-icon="i" title="Github_3"></span>
	<span class="icon social x-large" data-icon="j" title="Share_2"></span>
	<span class="icon social x-large" data-icon="k" title="Flickr_2"></span>
	<span class="icon social x-large" data-icon="l" title="Lastfm_2"></span>
	<span class="icon social x-large" data-icon="m" title="Soundcloud_2"></span>
	<span class="icon social x-large" data-icon="p" title="Picasa_2"></span>
	<span class="icon social x-large" data-icon="q" title="Deviantart_2"></span>
	<span class="icon social x-large" data-icon="r" title="Feed_2"></span>
	<span class="icon social x-large" data-icon="s" title="Reddit"></span>
	<span class="icon social x-large" data-icon="t" title="Twitter_4"></span>
	<span class="icon social x-large" data-icon="u" title="Youtube_2"></span>
	<span class="icon social x-large" data-icon="v" title="Vimeo_2"></span>
	<span class="icon social x-large" data-icon="w" title="Wordpress_2"></span>
	<span class="icon social x-large" data-icon="x" title="Tumblr_2"></span>
	<span class="icon social x-large" data-icon="y" title="Yahoo_2"></span>
	</div>
	
<!-- ===================================== 
	CODE/PRE 
===================================== -->
<h3 id="code">Code/Pre</h3>
<ul class="tabs">
<li><a href="#code-example">Example</a></li>
<li><a href="#code-html">PRE.html</a></li>
<li><a href="#code-css">PRE.css</a></li>
<li><a href="#code-js">PRE.js</a></li>
<li><a href="#code-php">PRE.php</a></li>
</ul>

	<div id="code-example" class="tab-content">
	<div class="col_4">
	<h4>PRE HTML</h4>
	<pre>
&lt;html&gt;
&lt;head&gt;&lt;title&gt;This is a title&lt;/title&gt;&lt;/head&gt;
&lt;body class=&quot;subpage&quot;&gt;
	&lt;!-- Content Here --&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
	</div>
	
	<!-- CODE CSS -->
	<div class="col_4">
	<h4>PRE CSS</h4>
	<pre class="css">
body{
font-weight:bold;
color:#000;
line-height:150%;
}</pre>
	</div>
	
	<!-- CODE JS -->
	<div class="col_4">
	<h4>PRE JS</h4>
	<pre class="js">
$(document).ready(function(){
	alert('jQuery');
});</pre>
	</div>
	</div>
	
	<div id="code-html" class="tab-content">
<pre>
&lt;!-- Code HTML --&gt;
&lt;pre&gt;
&#8230;code goes here&#8230; 
&lt;/pre&gt;</pre>
	</div>
	
	<div id="code-css" class="tab-content">
<pre>
&lt;!-- Code CSS --&gt;
&lt;pre&gt;
&#8230;code goes here&#8230; 
&lt;/pre&gt;</pre>
	</div>
	
	<div id="code-js" class="tab-content">
<pre>
&lt;!-- Code Javascript --&gt;
&lt;pre&gt;
&#8230;code goes here&#8230; 
&lt;/pre&gt;</pre>
	</div>
	
	<div id="code-php" class="tab-content">
<pre>
&lt;!-- Code PHP --&gt;
&lt;pre&gt;
&#8230;code goes here&#8230; 
&lt;/pre&gt;</pre>
	</div>

<!-- ===================================== 
	BUTTONS 
===================================== -->
<h3 id="buttons">Buttons</h3>
<ul class="tabs">
<li><a href="#btn-example">Example</a></li>
<li><a href="#btn-sizes">Button Sizes</a></li>
<li><a href="#btn-icons">Buttons w/Icons</a></li>
<li><a href="#btn-colors">Button Colors</a></li>
<li><a href="#btn-styles">Button Styles</a></li>
<li><a href="#btn-bar">Button Bar</a></li>
</ul>
	
	<style type="text/css">
	#btn-example a.button, #btn-example button{margin-bottom:10px;}
	</style>

	<div id="btn-example" class="tab-content">
	<div class="col_3">
	<h4>Buttons</h4>
	<button>Button</button><br />
	<a class="button" href="">A.button</a><br />
	<button class="small">Small</button> <br />
	<button class="small" disabled="disabled">Small (disabled)</button><br />
	<button class="medium">Medium</button><br />
	<button class="large">Large</button>
	</div>
	
	<!-- BUTTONS W/ICON -->
	<div class="col_3">
	<h4>Buttons w/Icons</h4>
	<button class="small"><span class="icon" data-icon="0"></span>Small</button><br />
	<button class="medium"><span class="icon medium" data-icon="M"></span>Medium</button><br />
	<button class="large"><span class="icon large" data-icon="F"></span>Large</button><br />
	</div>
	
	<!-- BUTTON VARIATIONS -->
	<div class="col_3">
	<h4>Button Colors</h4>
	<button class="blue"><span class="icon" data-icon="f"></span>.blue</button><br />
	<a class="button orange" href=""><span class="icon" data-icon="3"></span>.orange</a><br />
	<button class="small pink"><span class="icon" data-icon="p"></span>.pink</button><br /> 
	<button class="medium green"><span class="icon" data-icon="&nbsp;"></span>.green</button><br />
	<button class="large red"><span class="icon large" data-icon="m"></span>.red</button>
	</div>
	
	<!-- BUTTON STYLES -->
	<div class="col_3">
	<h4>Button Styles</h4>
	<button>default</button><br />
	<button class="pill"><span class="icon" data-icon="f"></span>.pill</button><br />
	<a class="button pop" href=""><span class="icon" data-icon="3"></span>.pop</a><br />
	<button class="inset"><span class="icon" data-icon="p"></span>.inset</button> <br />
	<button class="square"><span class="icon" data-icon="M"></span>.square</button>
	</div><div class="clear"></div>
	
	<div class="col_12">
	<h4>Button Bar</h4>
	<ul class="button-bar">
	<li><a href=""><span class="icon" data-icon="7"></span> Edit</a></li>
	<li><a href=""><span class="icon" data-icon="B"></span> Tag</a></li>
	<li><a href=""><span class="icon" data-icon=")"></span> Upload</a></li>
	<li><a href=""><span class="icon" data-icon="p"></span></a></li>
	</ul>&nbsp;&nbsp;
	
	<ul class="button-bar">
	<li><a href=""><span class="icon" data-icon=","></span></a></li>
	<li><a href=""><span class="icon" data-icon="."></span></a></li>
	<li><a href=""><span class="icon" data-icon="T"></span></a></li>
	<li><a href=""><span class="icon" data-icon="Z"></span></a></li>
	</ul>&nbsp;&nbsp;
	
	<ul class="button-bar">
	<li><a href="">Item1</a></li>
	<li><a href=""><span class="icon" data-icon="p"></span> Item2</a></li>
	<li><a href="">Item3</a></li>
	<li><a href="">Item4</a></li>
	</ul>&nbsp;&nbsp;
	
	<ul class="button-bar">
	<li><a href=""><span class="icon" data-icon="{"></span></a></li>
	<li><a href=""><span class="icon" data-icon="}"></span></a></li>
	</ul>
	</div>
	</div>
	
	<div id="btn-sizes" class="tab-content">
<pre>
&lt;!-- Button Sizes --&gt;
&lt;button&gt;Button&lt;/button&gt;
&lt;a class=&quot;button&quot; href=&quot;&quot;&gt;A.button&lt;/a&gt;
&lt;button class=&quot;small&quot;&gt;Small&lt;/button&gt;
&lt;button class=&quot;small&quot; disabled=&quot;disabled&quot;&gt;Small (disabled)&lt;/button&gt;
&lt;button class=&quot;medium&quot;&gt;Medium&lt;/button&gt;
&lt;button class=&quot;large&quot;&gt;Large&lt;/button&gt;</pre>
	</div>
	
	<div id="btn-icons" class="tab-content">
<pre>
&lt;!-- Buttons w/Icons --&gt;
&lt;button class=&quot;small&quot;&gt;&lt;span class=&quot;icon&quot;&gt;0&lt;/span&gt;Small&lt;/button&gt;
&lt;button class=&quot;medium&quot;&gt;&lt;span class=&quot;icon medium&quot;&gt;M&lt;/span&gt;Medium&lt;/button&gt;
&lt;button class=&quot;large&quot;&gt;&lt;span class=&quot;icon large&quot;&gt;F&lt;/span&gt;Large&lt;/button&gt;&lt;/pre&gt;
	</div>
	
	<div id="btn-colors" class="tab-content">
<pre>
&lt;!-- Buttons w/Colors --&gt;
&lt;button class=&quot;blue&quot;&gt;.blue&lt;/button&gt;
&lt;a class=&quot;button orange&quot; href=&quot;&quot;&gt;.orange&lt;/a&gt;
&lt;button class=&quot;small pink&quot;&gt;.pink&lt;/button&gt;
&lt;button class=&quot;small&quot; disabled=&quot;disabled&quot;&gt;Small (disabled)&lt;/button&gt;
&lt;button class=&quot;medium green&quot;&gt;.green&lt;/button&gt;
&lt;button class=&quot;large red&quot;&gt;.red&lt;/button&gt;</pre>
	</div>
	
	<div id="btn-styles" class="tab-content">
<pre>
&lt;!-- Default (no style) --&gt;
&lt;button&gt;default&lt;/button&gt;

&lt;!-- Pill --&gt;
&lt;button class=&quot;pill&quot;&gt;&lt;span class=&quot;icon&quot; data-icon=&quot;f&quot;&gt;&lt;/span&gt;.pill&lt;/button&gt;

&lt;!-- Pop --&gt;
&lt;a class=&quot;button pop&quot; href=&quot;&quot;&gt;&lt;span class=&quot;icon&quot; data-icon=&quot;3&quot;&gt;&lt;/span&gt;.pop&lt;/a&gt;

&lt;!-- Inset --&gt;
&lt;button class=&quot;inset&quot;&gt;&lt;span class=&quot;icon&quot; data-icon=&quot;p&quot;&gt;&lt;/span&gt;.inset&lt;/button&gt;

&lt;!-- Square --&gt;
&lt;button class=&quot;square&quot;&gt;&lt;span class=&quot;icon&quot; data-icon=&quot;M&quot;&gt;&lt;/span&gt;.square&lt;/button&gt;
</pre>
	</div>
	
	<div id="btn-bar" class="tab-content">
<pre>
&lt;!-- Button Bar w/icons --&gt;
&lt;ul class=&quot;button-bar&quot;&gt;
&lt;li&gt;&lt;a href=&quot;&quot;&gt;&lt;span class=&quot;icon&quot; data-icon=&quot;7&quot;&gt;&lt;/span&gt; Edit&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;&quot;&gt;&lt;span class=&quot;icon&quot; data-icon=&quot;B&quot;&gt;&lt;/span&gt; Tag&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;&quot;&gt;&lt;span class=&quot;icon&quot; data-icon=&quot;)&quot;&gt;&lt;/span&gt; Upload&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;&quot;&gt;&lt;span class=&quot;icon&quot; data-icon=&quot;p&quot;&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
	</div>

<!-- ===================================== 
	TABS 
===================================== -->
<h3 id="tabs">Tabs</h3>
<ul class="tabs">
<li><a href="#tabs-example">Example</a></li>
<li><a href="#tabs-left">Tabs.left</a></li>
<li><a href="#tabs-center">Tabs.center</a></li>
<li><a href="#tabs-right">Tabs.right</a></li>
</ul>

	<div id="tabs-example" class="tab-content">
	<div class="col_4">
	<h4>Tabs.left</h4>
	<ul class="tabs left">
	<li><a href="#tab1">Tab1</a></li>
	<li><a href="#tab2">Tab2</a></li>
	<li><a href="#tab3">Tab3</a></li>
	</ul>
	
	<div id="tab1" class="tab-content">Tab1</div>
	<div id="tab2" class="tab-content">Tab2</div>
	<div id="tab3" class="tab-content">Tab3</div>
	</div>
	
	<!-- TABS CENTER -->
	<div class="col_4">
	<h4>Tabs.center</h4>
	<ul class="tabs center">
	<li><a href="#tabc1">Tab1</a></li>
	<li><a href="#tabc2"><span class="icon" data-icon="="></span>Tab2</a></li>
	<li><a href="#tabc3">Tab3</a></li>
	</ul>
	
	<div id="tabc1" class="tab-content">Tab1</div>
	<div id="tabc2" class="tab-content">Tab2 has an icon.</div>
	<div id="tabc3" class="tab-content">Tab3</div>
	</div>
	
	<!-- TABS RIGHT -->
	<div class="col_4">
	<h4>Tabs.right</h4>
	<ul class="tabs right">
	<li><a href="#tabr1">Tab1</a></li>
	<li><a href="#tabr2">Tab2</a></li>
	<li><a href="#tabr3">Tab3</a></li>
	</ul>
	
	<div id="tabr1" class="tab-content">Tab1</div>
	<div id="tabr2" class="tab-content">Tab2</div>
	<div id="tabr3" class="tab-content">Tab3</div>
	</div>
	</div>
	
	<div id="tabs-left" class="tab-content">
<pre>
&lt;!-- Tabs Left --&gt;
&lt;ul class=&quot;tabs left&quot;&gt;
&lt;li&gt;&lt;a href=&quot;#tabr1&quot;&gt;Tab1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#tabr2&quot;&gt;Tab2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#tabr3&quot;&gt;Tab3&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div id=&quot;tabr1&quot; class=&quot;tab-content&quot;&gt;Tab1&lt;/div&gt;
&lt;div id=&quot;tabr2&quot; class=&quot;tab-content&quot;&gt;Tab2&lt;/div&gt;
&lt;div id=&quot;tabr3&quot; class=&quot;tab-content&quot;&gt;Tab3&lt;/div&gt;</pre>
	</div>
	
	<div id="tabs-center" class="tab-content">
<pre>
&lt;!-- Tabs Center --&gt;
&lt;ul class=&quot;tabs center&quot;&gt;
&lt;li&gt;&lt;a href=&quot;#tabc1&quot;&gt;Tab1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#tabc2&quot;&gt;&lt;span class=&quot;icon&quot;&gt;=&lt;/span&gt;Tab2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#tabc3&quot;&gt;Tab3&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div id=&quot;tabc1&quot; class=&quot;tab-content&quot;&gt;Tab1&lt;/div&gt;
&lt;div id=&quot;tabc2&quot; class=&quot;tab-content&quot;&gt;Tab2 has an icon.&lt;/div&gt;
&lt;div id=&quot;tabc3&quot; class=&quot;tab-content&quot;&gt;Tab3&lt;/div&gt;</pre>
	</div>
	
	<div id="tabs-right" class="tab-content">
<pre>
&lt;!-- Tabs Right --&gt;
&lt;ul class=&quot;tabs right&quot;&gt;
&lt;li&gt;&lt;a href=&quot;#tabr1&quot;&gt;Tab1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#tabr2&quot;&gt;Tab2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#tabr3&quot;&gt;Tab3&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div id=&quot;tabr1&quot; class=&quot;tab-content&quot;&gt;Tab1&lt;/div&gt;
&lt;div id=&quot;tabr2&quot; class=&quot;tab-content&quot;&gt;Tab2&lt;/div&gt;
&lt;div id=&quot;tabr3&quot; class=&quot;tab-content&quot;&gt;Tab3&lt;/div&gt;</pre>
	</div>

<!-- ===================================== 
	BREADCRUMBS 
===================================== -->
<h3 id="breadcrumbs">Breadcrumbs</h3>
<ul class="tabs">
<li><a href="#bread-example">Example</a></li>
<li><a href="#bread">Breadcrumbs</a></li>
<li><a href="#bread-alt1">Breadcrumbs.alt1</a></li>
</ul>

	<div id="bread-example" class="tab-content">
	<div class="col_6">
	<h4>Breadcrumbs</h4>
	<ul class="breadcrumbs">
	<li><a href="">Home</a></li>
	<li><a href="">Category</a></li>
	<li><a href="">Sub Category</a></li>
	<li><a href="">Page Title</a></li>
	</ul>
	</div>
	
	<div class="col_6">
	<h4>Breadcrumbs.alt1</h4>
	<ul class="breadcrumbs alt1">
	<li><a href="">Home</a></li>
	<li><a href="">Category</a></li>
	<li><a href="">Sub Category</a></li>
	<li><a href="">Page Title</a></li>
	</ul>
	</div>
	</div>
	
	<div id="bread" class="tab-content">
<pre>
&lt;!-- Breadcrumbs --&gt;
&lt;ul class=&quot;breadcrumbs&quot;&gt;
&lt;li&gt;&lt;a href=&quot;&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;&quot;&gt;Category&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;&quot;&gt;Sub Category&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;&quot;&gt;Page Title&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>
	</div>
	
	<div id="bread-alt1" class="tab-content">
<pre>
&lt;!-- Alternative Style --&gt;
&lt;ul class=&quot;breadcrumbs alt1&quot;&gt;
&lt;li&gt;&lt;a href=&quot;&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;&quot;&gt;Category&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;&quot;&gt;Sub Category&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;&quot;&gt;Page Title&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>
	</div>

<!-- ===================================== 
	GRIDS/COLUMNS 
===================================== -->
<h3 id="columns">Grids/Columns</h3>
<ul class="tabs">
<li><a href="#grids-example">Example</a></li>
<li><a href="#grids-html">HTML</a></li>
</ul>

	<div id="grids-example" class="tab-content">
	<div class="col_12 visible">col_12</div>
	<div class="col_1 visible">col_1</div><div class="col_11 visible">col_11</div>
	<div class="col_2 visible">col_2</div><div class="col_10 visible">col_10</div>
	<div class="col_3 visible">col_3</div><div class="col_9 visible">col_9</div>
	<div class="col_4 visible">col_4</div><div class="col_8 visible">col_8</div>
	<div class="col_5 visible">col_5</div><div class="col_7 visible">col_7</div>
	<div class="col_6 visible">col_6</div><div class="col_6 visible">col_6</div>
	<div class="col_7 visible">col_7</div><div class="col_5 visible">col_5</div>
	<div class="col_8 visible">col_8</div><div class="col_4 visible">col_4</div>
	<div class="col_9 visible">col_9</div><div class="col_3 visible">col_3</div>
	<div class="col_10 visible">col_10</div><div class="col_2 visible">col_2</div>
	<div class="col_11 visible">col_11</div><div class="col_1 visible">col_1</div>
	<div class="col_12 visible">col_12</div>
	
	<!-- FOURTHS -->
	<div class="col_3 visible">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
	nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
	<div class="col_3 visible">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
	nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
	<div class="col_3 visible">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
	nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
	<div class="col_3 visible">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
	nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
	
	<!-- THIRDS -->
	<div class="col_4 visible">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
	nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
	<div class="col_4 visible">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
	nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
	<div class="col_4 visible">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
	nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
	
	<!-- HALF & HALF -->
	<div class="col_6 visible">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
	nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
	<div class="col_6 visible">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
	nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
	</div>
	
	<div id="grids-html" class="tab-content">
<pre>
&lt;!-- Columns/Grid --&gt;
&lt;div class=&quot;col_12&quot;&gt;col_12&lt;/div&gt;
&lt;div class=&quot;col_1&quot;&gt;col_1&lt;/div&gt;&lt;div class=&quot;col_11&quot;&gt;col_11&lt;/div&gt;
&lt;div class=&quot;col_2&quot;&gt;col_2&lt;/div&gt;&lt;div class=&quot;col_10&quot;&gt;col_10&lt;/div&gt;
&lt;div class=&quot;col_3&quot;&gt;col_3&lt;/div&gt;&lt;div class=&quot;col_9&quot;&gt;col_9&lt;/div&gt;
&lt;div class=&quot;col_4&quot;&gt;col_4&lt;/div&gt;&lt;div class=&quot;col_8&quot;&gt;col_8&lt;/div&gt;
&lt;div class=&quot;col_5&quot;&gt;col_5&lt;/div&gt;&lt;div class=&quot;col_7&quot;&gt;col_7&lt;/div&gt;
&lt;div class=&quot;col_6&quot;&gt;col_6&lt;/div&gt;&lt;div class=&quot;col_6&quot;&gt;col_6&lt;/div&gt;
&lt;div class=&quot;col_7&quot;&gt;col_7&lt;/div&gt;&lt;div class=&quot;col_5&quot;&gt;col_5&lt;/div&gt;
&lt;div class=&quot;col_8&quot;&gt;col_8&lt;/div&gt;&lt;div class=&quot;col_4&quot;&gt;col_4&lt;/div&gt;
&lt;div class=&quot;col_9&quot;&gt;col_9&lt;/div&gt;&lt;div class=&quot;col_3&quot;&gt;col_3&lt;/div&gt;
&lt;div class=&quot;col_10&quot;&gt;col_10&lt;/div&gt;&lt;div class=&quot;col_2&quot;&gt;col_2&lt;/div&gt;
&lt;div class=&quot;col_11&quot;&gt;col_11&lt;/div&gt;&lt;div class=&quot;col_1&quot;&gt;col_1&lt;/div&gt;
&lt;div class=&quot;col_12&quot;&gt;col_12&lt;/div&gt;

&lt;!-- FOURTHS --&gt;
&lt;div class=&quot;col_3&quot;&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.&lt;/div&gt;
&lt;div class=&quot;col_3&quot;&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.&lt;/div&gt;
&lt;div class=&quot;col_3&quot;&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.&lt;/div&gt;
&lt;div class=&quot;col_3&quot;&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.&lt;/div&gt;

&lt;!-- THIRDS --&gt;
&lt;div class=&quot;col_4&quot;&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.&lt;/div&gt;
&lt;div class=&quot;col_4&quot;&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.&lt;/div&gt;
&lt;div class=&quot;col_4&quot;&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.&lt;/div&gt;

&lt;!-- HALF &amp; HALF --&gt;
&lt;div class=&quot;col_6&quot;&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.&lt;/div&gt;
&lt;div class=&quot;col_6&quot;&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.&lt;/div&gt;</pre>
	</div>

<!-- ===================================== 
	IMAGES 
===================================== -->
<h3 id="images">Images</h3>
<ul class="tabs">
<li><a href="#images-example">Example</a></li>
<li><a href="#images-placeholder">Placeholder</a></li>
<li><a href="#images-style1">.style1</a></li>
<li><a href="#images-style2">.style2</a></li>
<li><a href="#images-style3">.style3</a></li>
<li><a href="#images-caption">.caption</a></li>
<li><a href="#images-left">.align-left</a></li>
<li><a href="#images-right">.align-right</a></li>
<li><a href="#images-full-width">.full-width</a></li>
<li><a href="#images-gallery">DIV.gallery</a></li>
</ul>

	<div id="images-example" class="tab-content">
	<div class="col_3">
	<h4>Placeholder</h4>
	<img src="http://placehold.it/180x150/4D99E0/ffffff.png&text=180x150" width="180" height="150" /> 
	</div>
	
	<div class="col_3">
	<h4>IMG.style1</h4>
	<img class="style1" src="http://placehold.it/180x150/4D99E0/ffffff.png&text=180x150" width="180" height="150" /> 
	</div>
	
	<div class="col_3">
	<h4>IMG.style2</h4>
	<img class="style2" src="http://placehold.it/180x150/4D99E0/ffffff.png&text=180x150" width="180" height="150" /> 
	</div>
	
	<div class="col_3">
	<h4>IMG.style3</h4>
	<img class="style3" src="http://placehold.it/180x150/4D99E0/ffffff.png&text=180x150" width="180" height="150" /> 
	</div>
	
	<div class="clear">&nbsp;</div>
	
	<div class="col_6">
	<h4>IMG.caption</h4>
	<img class="caption" title="This is the image caption" src="http://placehold.it/400x350/4D99E0/ffffff.png&text=400x350" width="400" height="350" /> 
	</div>
	
	<div class="col_6 gallery">
	<h4>DIV.gallery</h4>
	<a href="http://placehold.it/600x450/4D99E0/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/4D99E0/ffffff.png&text=100x100" width="100" height="100" /></a>
	<a href="http://placehold.it/600x450/75CC00/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/75CC00/ffffff.png&text=100x100" width="100" height="100" /></a>
	<a href="http://placehold.it/600x450/E49800/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/E49800/ffffff.png&text=100x100" width="100" height="100" /></a>
	<a href="http://placehold.it/600x450/E4247E/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/E4247E/ffffff.png&text=100x100" width="100" height="100" /></a>
	<a href="http://placehold.it/600x450/00C6E4/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/00C6E4/ffffff.png&text=100x100" width="100" height="100" /></a>
	<a href="http://placehold.it/600x450/E4DB0F/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/E4DB0F/ffffff.png&text=100x100" width="100" height="100" /></a>
	<a href="http://placehold.it/600x450/7400E4/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/7400E4/ffffff.png&text=100x100" width="100" height="100" /></a>
	<a href="http://placehold.it/600x450/C50000/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/C50000/ffffff.png&text=100x100" width="100" height="100" /></a>
	</div>
	
	<div class="clear">&nbsp;</div>
	
	<div class="col_4">
	<h4>IMG.align-left</h4>
	<img class="align-left" src="http://placehold.it/100x100/4D99E0/ffffff.png&text=100x100" width="100" height="100" />
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt 
	ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
	ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor 
	in hendrerit in vulputate velit esse molestie consequat.</p>	
	</div>
	
	<div class="col_4">
	<h4>IMG.align-right</h4>
	<img class="align-right" src="http://placehold.it/100x100/4D99E0/ffffff.png&text=100x100" width="100" height="100" />
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt 
	ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
	ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor 
	in hendrerit in vulputate velit esse molestie consequat.</p>	
	</div>
	
	<div class="col_4">
	<h4>IMG.full-width</h4>
	<img class="full-width" src="http://placehold.it/260x200/4D99E0/ffffff.png&text=full+width" />	
	</div>
	</div>
	
	<div id="images-placeholder" class="tab-content">
<pre>
&lt;!-- Placeholder --&gt;
&lt;img src=&quot;http://placehold.it/180x150/4D99E0/ffffff.png&amp;text=180x150&quot; width=&quot;180&quot; height=&quot;150&quot; /&gt;</pre>
	</div>
	
	<div id="images-style1" class="tab-content">
<pre>
&lt;!-- Style1 --&gt;
&lt;img class=&quot;style1&quot; src=&quot;http://placehold.it/180x150/4D99E0/ffffff.png&amp;text=180x150&quot; width=&quot;180&quot; height=&quot;150&quot; /&gt;</pre>
	</div>
	
	<div id="images-style2" class="tab-content">
<pre>
&lt;!-- Style2 --&gt;
&lt;img class=&quot;style2&quot; src=&quot;http://placehold.it/180x150/4D99E0/ffffff.png&amp;text=180x150&quot; width=&quot;180&quot; height=&quot;150&quot; /&gt;</pre>
	</div>
	
	<div id="images-style3" class="tab-content">
<pre>
&lt;!-- Style3 --&gt;
&lt;img class=&quot;style3&quot; src=&quot;http://placehold.it/180x150/4D99E0/ffffff.png&amp;text=180x150&quot; width=&quot;180&quot; height=&quot;150&quot; /&gt;</pre>
	</div>
	
	<div id="images-caption" class="tab-content">
<pre>
&lt;!-- Caption --&gt;
&lt;img class=&quot;caption&quot; title=&quot;This is the image caption&quot; src=&quot;http://placehold.it/400x350/4D99E0/ffffff.png&amp;text=400x350&quot; width=&quot;400&quot; height=&quot;350&quot; /&gt;</pre>
	</div>
	
	<div id="images-left" class="tab-content">
<pre>
&lt;!-- Align Left --&gt;
&lt;img class=&quot;align-left&quot; src=&quot;http://placehold.it/100x100/4D99E0/ffffff.png&amp;text=100x100&quot; width=&quot;100&quot; height=&quot;100&quot; /&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt 
ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor 
in hendrerit in vulputate velit esse molestie consequat.&lt;/p&gt;</pre>
	</div>
	
	<div id="images-right" class="tab-content">
<pre>
&lt;!-- Align Right --&gt;
&lt;img class=&quot;align-right&quot; src=&quot;http://placehold.it/100x100/4D99E0/ffffff.png&amp;text=100x100&quot; width=&quot;100&quot; height=&quot;100&quot; /&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt 
ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor 
in hendrerit in vulputate velit esse molestie consequat.&lt;/p&gt;</pre>
	</div>
	
	<div id="images-full-width" class="tab-content">
<pre>
&lt;!-- Full Width --&gt;
&lt;img class=&quot;full-width&quot; src=&quot;http://placehold.it/260x200/4D99E0/ffffff.png&amp;text=full+width&quot; /&gt;</pre>
	</div>
	
	<div id="images-gallery" class="tab-content">
<pre>
&lt;!-- Gallery --&gt;
&lt;div class=&quot;gallery&quot;&gt;
&lt;a href=&quot;http://placehold.it/600x450/4D99E0/ffffff.png&amp;text=600x450&quot;&gt;&lt;img src=&quot;http://placehold.it/100x100/4D99E0/ffffff.png&amp;text=100x100&quot; width=&quot;100&quot; height=&quot;100&quot; /&gt;&lt;/a&gt;
&lt;a href=&quot;http://placehold.it/600x450/75CC00/ffffff.png&amp;text=600x450&quot;&gt;&lt;img src=&quot;http://placehold.it/100x100/75CC00/ffffff.png&amp;text=100x100&quot; width=&quot;100&quot; height=&quot;100&quot; /&gt;&lt;/a&gt;
&lt;a href=&quot;http://placehold.it/600x450/E49800/ffffff.png&amp;text=600x450&quot;&gt;&lt;img src=&quot;http://placehold.it/100x100/E49800/ffffff.png&amp;text=100x100&quot; width=&quot;100&quot; height=&quot;100&quot; /&gt;&lt;/a&gt;
&lt;a href=&quot;http://placehold.it/600x450/E4247E/ffffff.png&amp;text=600x450&quot;&gt;&lt;img src=&quot;http://placehold.it/100x100/E4247E/ffffff.png&amp;text=100x100&quot; width=&quot;100&quot; height=&quot;100&quot; /&gt;&lt;/a&gt;
&lt;a href=&quot;http://placehold.it/600x450/00C6E4/ffffff.png&amp;text=600x450&quot;&gt;&lt;img src=&quot;http://placehold.it/100x100/00C6E4/ffffff.png&amp;text=100x100&quot; width=&quot;100&quot; height=&quot;100&quot; /&gt;&lt;/a&gt;
&lt;a href=&quot;http://placehold.it/600x450/E4DB0F/ffffff.png&amp;text=600x450&quot;&gt;&lt;img src=&quot;http://placehold.it/100x100/E4DB0F/ffffff.png&amp;text=100x100&quot; width=&quot;100&quot; height=&quot;100&quot; /&gt;&lt;/a&gt;
&lt;a href=&quot;http://placehold.it/600x450/7400E4/ffffff.png&amp;text=600x450&quot;&gt;&lt;img src=&quot;http://placehold.it/100x100/7400E4/ffffff.png&amp;text=100x100&quot; width=&quot;100&quot; height=&quot;100&quot; /&gt;&lt;/a&gt;
&lt;a href=&quot;http://placehold.it/600x450/C50000/ffffff.png&amp;text=600x450&quot;&gt;&lt;img src=&quot;http://placehold.it/100x100/C50000/ffffff.png&amp;text=100x100&quot; width=&quot;100&quot; height=&quot;100&quot; /&gt;&lt;/a&gt;
&lt;/div&gt;</pre>
	</div>

<!-- ===================================== 
	SLIDESHOW 
===================================== -->
<h3 id="slideshow">Slideshow</h3>
<ul class="tabs">
<li><a href="#slideshow-example">Example</a></li>
<li><a href="#slideshow-html">HTML</a></li>
</ul>

	<div id="slideshow-example" class="tab-content">
	<div class="col_8">
	<ul class="slideshow" width="550" height="350">
	<li><img src="http://placehold.it/550x350/4D99E0/ffffff.png&text=550x350" width="550" height="350" /></li>
	<li><img src="http://placehold.it/550x350/75CC00/ffffff.png&text=550x350" width="550" height="350" /></li>
	<li><img src="http://placehold.it/550x350/E49800/ffffff.png&text=550x350" width="550" height="350" /></li>
	<li><span style="padding:20px;display:block;width:510px;"><h3>Slide Anything</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
	nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></span></li>
	</ul>
	</div>
	
	<div class="col_4">
	<h4>Features</h4>
	<ul class="checks">
	<li>Slide Any HTML Content</li>
	<li>Iframes</li>
	<li>Videos</li>
	<li>Images</li>
	<li>Lightweight</li>
	<li>Multiple Slideshows</li>
	<li>Zero Setup Required</li>
	<li>Flexible Markup</li>
	<li>Unordered List (default)</li>
	</ul>
	</div>
	</div>
	
	<div id="slideshow-html" class="tab-content">
<pre>
&lt;!-- Slideshow --&gt;
&lt;ul class=&quot;slideshow&quot; width=&quot;550&quot; height=&quot;350&quot;&gt;
&lt;li&gt;&lt;img src=&quot;http://placehold.it/550x350/4D99E0/ffffff.png&amp;text=550x350&quot; width=&quot;550&quot; height=&quot;350&quot; /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img src=&quot;http://placehold.it/550x350/75CC00/ffffff.png&amp;text=550x350&quot; width=&quot;550&quot; height=&quot;350&quot; /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img src=&quot;http://placehold.it/550x350/E49800/ffffff.png&text=550x350&quot; width=&quot;550&quot; height=&quot;350&quot; /&gt;&lt;/li&gt;
&lt;li&gt;&lt;h3&gt;Slide Anything&lt;/h3&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>
	</div>


<!-- ===================================== 
	MEDIA
===================================== -->
<h3 id="media">Media</h3>
<ul class="tabs">
<li><a href="#media-example">Example</a></li>
<li><a href="#media-videoplaceholder">Video Placeholder</a></li>
<li><a href="#media-mapplaceholder">Map Placeholder</a></li>
<li><a href="#media-calendar">Calendar</a></li>
</ul>

	<div id="media-example" class="tab-content">
	<div class="col_4">
	<h4>Video Placeholder</h4>
	<a class="video-placeholder" href="http://youtu.be/lfnAb11wKQc"><img src="http://placehold.it/250x200/222222/999999.png" width="250" height="200" /></a>
	</div>
	
	<div class="col_4">
	<h4>Map Placholder</h4>
	<iframe class="map-placeholder" width="100%" height="200" src="http://maps.google.com/maps?f=q&amp;t=m&amp;z=5&amp;output=embed" frameborder="0"></iframe>
	</div>
	
	<div class="col_4">
	<h4>Calendar</h4>
	<div class="calendar" data-month="2" data-year="2012"></div>
	</div>
	</div>
	
	<div id="media-videoplaceholder" class="tab-content">
<pre>
&lt;!-- Video Placeholder --&gt;
&lt;a class=&quot;video-placeholder&quot; href=&quot;http://youtu.be/lfnAb11wKQc&quot;&gt;&lt;img src=&quot;http://placehold.it/250x200/222222/999999.png&quot; width=&quot;250&quot; height=&quot;200&quot; /&gt;&lt;/a&gt;
</pre>
	</div>
	
	<div id="media-mapplaceholder" class="tab-content">
<pre>
&lt;!-- Map Placeholder --&gt;
&lt;iframe class=&quot;map-placeholder&quot; width=&quot;100%&quot; height=&quot;200&quot; src=&quot;http://maps.google.com/maps?f=q&amp;t=m&amp;z=5&amp;output=embed&quot;  frameborder=&quot;0&quot;&gt;&lt;/iframe&gt;
</pre>
	</div>

	<div id="media-calendar" class="tab-content">
<pre>
&lt;!-- Calendar --&gt;
&lt;div class=&quot;calendar&quot; data-month=&quot;2&quot; data-year=&quot;2012&quot;&gt;&lt;/div&gt;

&lt;!-- Set Calendar Month --&gt;
data-month=&quot;2&quot;

&lt;!-- Set Calendar Year --&gt;
data-year=&quot;2012&quot;
</pre>
	</div>
<!-- ===================================== 
	FORMS 
===================================== -->
<h3 id="forms">Forms</h3>
<ul class="tabs">
<li><a href="#form-example">Example</a></li>
<li><a href="#form-textfield">Textfield</a></li>
<li><a href="#form-select">Select</a></li>
<li><a href="#form-checkbox">Checkbox</a></li>
<li><a href="#form-radio">Radio</a></li>
<li><a href="#form-fieldset">Fieldset</a></li>
<li><a href="#form-textarea">Textarea</a></li>
<li><a href="#form-notices">Notices</a></li>
</ul>

	<div id="form-example" class="tab-content">
	<h4>Form.vertical</h4>
	<form class="vertical"><div class="col_4">
	<label for="text1">Text Field</label>
	<input id="text1" type="text" />
	
	<label for="text2">Placeholder</label>
	<input id="text2" type="text" placeholder="Placeholder Text" />
	
	<label for="text3" class="disabled">Disabled Field</label>
	<input id="text3" type="text" disabled="disabled" />
	
	<label for="text4">Label with Right Hint <span class="right">A-Z, 0-9</span></label>
	<input id="text4" type="text" />
	
	<label for="text5">Label with Hint <span>A-Z, 0-9</span></label>
	<input id="text5" type="text" />
	
	<label for="text6" class="error">Text Field (Error)</label>
	<input id="text6" class="error" type="text" />
	</div>
	
	<div class="col_4">
	<label for="select1">Select Field</label>
	<select id="select1">
	<option value="0">-- Choose --</option>
	<option value="1">Option 1</option>
	<option value="2">Option 2</option>
	<option value="3">Option 3</option>
	</select>
	
	<label for="select2">Select.fancy</label>
	<select id="select2" class="fancy" style="width:90%;">
	<option value="0">-- Choose --</option>
	<option value="1">Option 1</option>
	<option value="2">Option 2</option>
	<option value="3">Option 3</option>
	</select>
	
	<label for="select3">Select.fancy multiple</label>
	<select id="select3" multiple="multiple" class="fancy" style="width:259px;">
	<option value="0">-- Choose --</option>
	<option value="1">Option 1</option>
	<option value="2">Option 2</option>
	<option value="3">Option 3</option>
	</select>
	
	<fieldset>
	<legend>Checkboxes</legend>
	<input type="checkbox" id="check1" /> <label for="check1" class="inline">Checkbox Field</label><br />
	<input type="checkbox" id="check2" /> <label for="check2" class="inline">Checkbox Field</label><br />
	<input type="checkbox" id="check3" /> <label for="check3" class="inline">Checkbox Field</label>
	</fieldset>
	
	<fieldset>
	<legend>Radios</legend>
	<input type="radio" name="radio" id="radio1" /> <label for="radio1" class="inline">Option1</label><br />
	<input type="radio" name="radio" id="radio2" /> <label for="radio2" class="inline">Option1</label><br />
	<input type="radio" name="radio" id="radio3" /> <label for="radio3" class="inline">Option1</label>
	</fieldset>
	
	<label for="file1">File Field</label>
	<input id="file1" type="file" />
	</div>
	
	<div class="col_4">
	<div class="notice error"><span class="icon medium" data-icon="X"></span>This is an Error Notice <a href="#close" class="icon close" data-icon="x"></a></div>
	<div class="notice warning"><span class="icon medium" data-icon="!"></span>This is a Warning Notice <a href="#close" class="icon close" data-icon="x"></a></div>
	<div class="notice success"><span class="icon medium" data-icon="C"></span>This is a Success Notice <a href="#close" class="icon close" data-icon="x"></a></div>
	
	<label for="textarea1">TextArea</label>
	<textarea id="textarea1" placeholder="Placeholder Text"></textarea>
	
	<label for="rte1">Rich Text Editor</label>
	<textarea id="rte1" class="rte">This Rich Text Editor is meant as a placeholder for now. Does not function in IE.</textarea>
	
	<button type="submit">Submit</button>
		</form>
	</div><div class="clear"></div>
	<hr />
	
	<div class="col_12">
	<h4>Inline Form Fields (default)</h4>
	<form>
	<label for="text21">Label</label>
	<input type="text" name="text21" placeholder="Username" />
	<input type="text" name="text22" placeholder="Password "/>
	<select id="select22" class="fancy">
	<option value="0">-- Choose --</option>
	<option value="1">Option 1</option>
	<option value="2">Option 2</option>
	<option value="3">Option 3</option>
	</select>&nbsp;
	
	<button type="button" class="small green">Button</button>
	<input type="checkbox" name="check23" id="check23" /> <label for="check23">Checkbox Label</label>
	</form>
	</div>
	<hr />
	
	<style type="text/css">
	#form-sizes label{border:1px dotted #ccc;*border:0;*background:#efefef;}
	</style>
	
	<div id="form-sizes" class="col_12">
	<h4>Input/Label Sizes</h4>
	<label class="col_12">label.col_12</label>
	<input type="text" placeholder=".col_1" class="col_1" /><label class="col_11">label.col_11</label>
	<input type="text" placeholder=".col_2" class="col_2" /><label class="col_10">label.col_10</label>
	<input type="text" placeholder=".col_3" class="col_3" /><label class="col_9">label.col_9</label>
	<input type="text" placeholder=".col_4" class="col_4" /><label class="col_8">label.col_8</label>
	<input type="text" placeholder=".col_5" class="col_5" /><label class="col_7">label.col_7</label>
	<input type="text" placeholder=".col_6" class="col_6" /><label class="col_6">label.col_6</label>
	<input type="text" placeholder=".col_7" class="col_7" /><label class="col_5">label.col_5</label>
	<input type="text" placeholder=".col_8" class="col_8" /><label class="col_4">label.col_4</label>
	<input type="text" placeholder=".col_9" class="col_9" /><label class="col_3">label.col_3</label>
	<input type="text" placeholder=".col_10" class="col_10" /><label class="col_2">label.col_2</label>
	<input type="text" placeholder=".col_11" class="col_11" /><label class="col_1">label.col_1</label>
	<input type="text" placeholder=".col_12" class="col_12" />
	</div>
	</div>
	
	<div id="form-textfield" class="tab-content">
<pre>
&lt;!-- Text Field --&gt;
&lt;label for=&quot;text1&quot;&gt;Text Field&lt;/label&gt;
&lt;input id=&quot;text1&quot; type=&quot;text&quot; /&gt;

&lt;!-- Placeholder Text --&gt;
&lt;label for=&quot;text2&quot;&gt;Placeholder&lt;/label&gt;
&lt;input id=&quot;text2&quot; type=&quot;text&quot; placeholder=&quot;Placeholder Text&quot; /&gt;

&lt;!-- Disabled Field --&gt;
&lt;label for=&quot;text3&quot; class=&quot;disabled&quot;&gt;Disabled Field&lt;/label&gt;
&lt;input id=&quot;text3&quot; type=&quot;text&quot; disabled=&quot;disabled&quot; /&gt;

&lt;!-- Label with Right Hint --&gt;
&lt;label for=&quot;text4&quot;&gt;Label with Right Hint &lt;span class=&quot;right&quot;&gt;A-Z, 0-9&lt;/span&gt;&lt;/label&gt;
&lt;input id=&quot;text4&quot; type=&quot;text&quot; /&gt;

&lt;!-- Label with Hint --&gt;
&lt;label for=&quot;text5&quot;&gt;Label with Hint &lt;span&gt;A-Z, 0-9&lt;/span&gt;&lt;/label&gt;
&lt;input id=&quot;text5&quot; type=&quot;text&quot; /&gt;

&lt;!-- Text Field Error --&gt;
&lt;label for=&quot;text6&quot; class=&quot;error&quot;&gt;Text Field (Error)&lt;/label&gt;
&lt;input id=&quot;text6&quot; class=&quot;error&quot; type=&quot;text&quot; /&gt;</pre>
	</div>
	
	<div id="form-select" class="tab-content">
<pre>
&lt;!-- Select --&gt;
&lt;label for=&quot;select1&quot;&gt;Select Field&lt;/label&gt;
&lt;select id=&quot;select1&quot;&gt;
&lt;option value=&quot;0&quot;&gt;-- Choose --&lt;/option&gt;
&lt;option value=&quot;1&quot;&gt;Option 1&lt;/option&gt;
&lt;option value=&quot;2&quot;&gt;Option 2&lt;/option&gt;
&lt;option value=&quot;3&quot;&gt;Option 3&lt;/option&gt;
&lt;/select&gt;</pre>
	</div>
	
	<div id="form-checkbox" class="tab-content">
<pre>
&lt;!-- Checkbox --&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;check1&quot; /&gt;
&lt;label for=&quot;check1&quot; class=&quot;inline&quot;&gt;Checkbox Field&lt;/label&gt;</pre>
	</div>
	
	<div id="form-radio" class="tab-content">
<pre>
&lt;!-- Radio --&gt;
&lt;input type=&quot;radio&quot; name=&quot;radio&quot; id=&quot;radio1&quot; /&gt;
&lt;label for=&quot;radio1&quot; class=&quot;inline&quot;&gt;Option1&lt;/label&gt;</pre>
	</div>
	
	<div id="form-fieldset" class="tab-content">
<pre>
&lt;!-- Fieldset --&gt;
&lt;fieldset&gt;
&lt;legend&gt;Checkboxes&lt;/legend&gt;
	&lt;!-- Form Fields Here --&gt;
&lt;/fieldset&gt;</pre>
	</div>
	
	<div id="form-textarea" class="tab-content">
<pre>
&lt;!-- Textarea --&gt;
&lt;textarea id=&quot;textarea1&quot; placeholder=&quot;Placeholder Text&quot;&gt;&lt;/textarea&gt;</pre>
	</div>
	
	<div id="form-notices" class="tab-content">
<pre>
&lt;!-- Error --&gt;
&lt;div class=&quot;notice error&quot;&gt;This is an Error Notice&lt;/div&gt;

&lt;!-- Warning --&gt;
&lt;div class=&quot;notice warning&quot;&gt;This is a Warning Notice&lt;/div&gt;

&lt;!-- Success --&gt;
&lt;div class=&quot;notice success&quot;&gt;This is a Success Notice&lt;/div&gt;</pre>
	</div>
	
<!-- ===================================== 
	Extras/Helpers
===================================== -->
<h3 id="forms">Extras/Helpers</h3>
	<table><thead><tr>
	<th>Item</th>
	<th>Description</th>
	</tr><tr>
	<td><code>.left</code> <code>.center</code> <code>.right</code></td>
	<td>Align Text</td>
	</tr><tr>
	<td><code>a.lightbox</code></td>
	<td>Open Link in lightbox. Auto Detects, iframe, inline content, etc.</td>
	</tr>
	<tr>
	<td><code>.clear</code></td>
	<td>Add this class to a div or other element to clear floats.</td>
	</tr><tr>
	<td><code>.clearfix</code></td>
	<td>Add this class to containers that have floating children inside to clear inner floats.</td>
	</tr><tr>
	<td><code>a href="#anchor"</code></td>
	<td>Automatically scrolls the page to the desired object with <code>id="anchor"</code>.</td>
	</tr><tr>
	<td><code>li.first</code> <code>li.last</code></td>
	<td>First and Last <code>&lt;li&gt;&lt;/li&gt;</code> items automatically get classes <code>.first</code> and <code>.last</code> respectively.</td>
	</tr><tr>
	<td><code>.column</code></td>
	<td>All columns have the class <code>.column</code> added to them automatically for easy global styling.</td>
	</tr><tr>
	<td><code>.visible</code></td>
	<td>Add this to columns to view during production. Adds light grey background color to columns.</td>
	</tr><tr>
	<td><code>div.inner</code></td>
	<td>All columns have an <code>div.inner</code> container automatically generated inside for easy CSS styling, adding and removing of padding inside columns.</td>
	</tr><tr>
	<td><code>.hide</code> <code>.show</code></td>
	<td><code>.hide</code> to hide content (display:none). <code>.show</code> to show content (display:block).</td>
	</tr><tr>
	<td><code>tr.first</code> <code>tr.last</code></td>
	<td>First and Last <code>&lt;tr&gt;&lt;/tr&gt;</code> items automatically get classes <code>.first</code> and <code>.last</code> respectively.</td>
	</tr><tr>
	<td><code>tr.alt</code></td>
	<td>Every second table row automatically gets class <code>.alt</code>.</td>
	</tr></thead></table>


</div><!-- end top col_12 -->

<!-- ===================================== START FOOTER ===================================== -->
<div class="clear"></div>
<div id="footer">
&copy; Copyright 2011–2012 All Rights Reserved. This website was built with <a href="http://www.99lime.com">HTML KickStart</a>
<a id="link-top" href="#top-of-page">Top</a>
</div>

</div><!-- END WRAP -->
</body></html>